import React from "react";

import { storiesOf } from "@storybook/react";
import { select, number } from "@storybook/addon-knobs";
// import { withSmartKnobs } from 'storybook-addon-smart-knobs'

import Space from ".";

const directionVariants = {
  horizontal: 'horizontal',
  vertical: 'vertical',
};

const alignVariants = {
  start: 'start',
  center: 'center',
  baseline: 'baseline',
  end: 'end',
};

storiesOf("Space", module)
  .add("Space", () => (
    <div className=''>
      left
      <Space
        direction={select("Direction", directionVariants, 'horizontal')}
        align={select("Align", alignVariants, 'start')}
        size={number('size', 8)}
        onClick={() => console.info('click')}
        onChange={() => console.info('change')}
      >
        1
        <div style={{ paddingTop: 20, height: 100 }}>2</div>
        3
        <span style={{ height: 200 }}>4</span>
      </Space>
      right
    </div>
  ));